<template>
  <div>
    <h1>角色列表</h1>
    <!-- 新增角色表单 -->
    <form @submit.prevent="addRole">
      <input v-model="newRole.name" placeholder="角色名称" required>
      <input v-model="newRole.description" placeholder="角色描述">
      <button type="submit">新增角色</button>
    </form>
    <!-- 角色列表 -->
    <table>
      <thead>
      <tr>
        <th>角色名称</th>
        <th>角色描述</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(role, index) in roles" :key="index">
        <td>{{ role.name }}</td>
        <td>{{ role.description }}</td>
        <td>
          <button @click="editRole(index)">编辑</button>
          <button @click="deleteRole(index)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟角色数据
const roles = ref([
  { name: '前台接待员', description: '负责客人的入住、退房等接待工作' },
  { name: '客房服务员', description: '负责客房的清洁和整理工作' }
]);

// 新增角色数据
const newRole = ref({
  name: '',
  description: ''
});

// 新增角色方法
const addRole = () => {
  if (newRole.value.name) {
    roles.value.push({ ...newRole.value });
    newRole.value = {
      name: '',
      description: ''
    };
  }
};

// 编辑角色方法（简单示例，可扩展为弹出编辑框）
const editRole = (index) => {
  console.log('编辑角色，索引：', index);
};

// 删除角色方法
const deleteRole = (index) => {
  roles.value.splice(index, 1);
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

form {
  margin-top: 20px;
}

input {
  margin-right: 10px;
  padding: 5px;
}

button {
  padding: 5px 10px;
}
</style>